<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第二课堂素质拓展学分评定系统</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
    <script src="js/config.js"></script>
    <link rel="icon" href="images/log.svg">
    <style>
        body {
            min-height: 1024px;
            background: linear-gradient(to bottom, #f8fafc, #f1f5f9);
        }

        .sidebar {
            width: 240px;
            height: calc(100vh - 64px);
            border-right: 1px solid rgba(0, 0, 0, 0.05);
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }

        .main-content {
            width: calc(100% - 240px);
        }

        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .table-shadow {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>

<body class="bg-gray-50">
    <div class="flex flex-col h-screen">
        <header class="h-16 bg-white border-b border-gray-200 px-6 flex items-center justify-between shadow-sm">
            <div class="flex items-center space-x-4">
                <img src="images/log.svg" alt="logo" class="h-8 w-8">
                <span class="text-xl font-semibold text-gray-900">第二课堂素质拓展学分评定系统</span>
            </div>
            <div class="flex items-center space-x-4">
                <span class="flex items-center text-gray-600">
                    <i class="fas fa-user-circle text-xl mr-2"></i>
                    管理员：张明德
                </span>
                <button
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors duration-200 btn-hover">
                    <i class="fas fa-sign-out-alt mr-2"></i>
                    退出登录
                </button>
            </div>
        </header>
        <div class="flex flex-1 overflow-hidden">
            <aside class="sidebar">
                <nav class="py-4">
                    <div class="px-4 py-2">
                        <div class="text-gray-500 text-sm font-medium mb-2">主要功能</div>
                        <div class="space-y-1">
                            <a href="student-management.html"
                                class="nav-item active flex items-center px-4 py-2 text-blue-600 bg-blue-50 rounded">
                                <i class="fas fa-users w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">学生管理</span>
                            </a>
                            <a href="data-management.html"
                                class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-database w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">数据管理</span>
                            </a>
                            <a href="statistics-analysis.html"
                                class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-chart-bar w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">统计分析</span>
                            </a>
                            <a href="credit-warning.html"
                                class="nav-item flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100 rounded">
                                <i class="fas fa-exclamation-triangle w-5 h-5 flex items-center justify-center"></i>
                                <span class="ml-3">学分警示</span>
                            </a>
                        </div>
                    </div>
                </nav>
            </aside>
            <main class="main-content p-6 overflow-auto">
                <div class="mb-6">
                    <h1 class="text-2xl font-semibold text-gray-900 mb-4">欢迎使用第二课堂素质拓展学分评定系统</h1>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
                        <a href="student-management.html"
                            class="bg-white p-6 rounded-lg border border-gray-200 card-hover block">
                            <div class="flex items-center">
                                <div class="p-3 bg-blue-100 rounded-lg">
                                    <i class="fas fa-users text-blue-600 text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">学生管理</p>
                                    <p class="text-lg font-semibold text-gray-900">管理学生信息</p>
                                </div>
                            </div>
                        </a>
                        <a href="data-management.html"
                            class="bg-white p-6 rounded-lg border border-gray-200 card-hover block">
                            <div class="flex items-center">
                                <div class="p-3 bg-green-100 rounded-lg">
                                    <i class="fas fa-database text-green-600 text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">数据管理</p>
                                    <p class="text-lg font-semibold text-gray-900">导入导出数据</p>
                                </div>
                            </div>
                        </a>
                        <a href="statistics-analysis.html"
                            class="bg-white p-6 rounded-lg border border-gray-200 card-hover block">
                            <div class="flex items-center">
                                <div class="p-3 bg-yellow-100 rounded-lg">
                                    <i class="fas fa-chart-bar text-yellow-600 text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">统计分析</p>
                                    <p class="text-lg font-semibold text-gray-900">查看统计图表</p>
                                </div>
                            </div>
                        </a>
                        <a href="credit-warning.html"
                            class="bg-white p-6 rounded-lg border border-gray-200 card-hover block">
                            <div class="flex items-center">
                                <div class="p-3 bg-red-100 rounded-lg">
                                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">学分警示</p>
                                    <p class="text-lg font-semibold text-gray-900">处理预警学生</p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="bg-white p-6 rounded-lg border border-gray-200 mb-6">
                        <h2 class="text-lg font-semibold text-gray-900 mb-4">系统概览</h2>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            <div class="text-center">
                                <div class="text-3xl font-bold text-blue-600 mb-2">1,234</div>
                                <div class="text-sm text-gray-600">总学生数</div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-green-600 mb-2">6.8</div>
                                <div class="text-sm text-gray-600">平均学分</div>
                            </div>
                            <div class="text-center">
                                <div class="text-3xl font-bold text-red-600 mb-2">89</div>
                                <div class="text-sm text-gray-600">预警人数</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-lg border border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">最近活动</h2>
                    <div class="space-y-4">
                        <div class="flex items-center space-x-4">
                            <div class="w-2 h-2 bg-blue-600 rounded-full"></div>
                            <div class="flex-1">
                                <p class="text-sm text-gray-900">新增学生信息：李明（2020101006）</p>
                                <p class="text-xs text-gray-500">2分钟前</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="w-2 h-2 bg-green-600 rounded-full"></div>
                            <div class="flex-1">
                                <p class="text-sm text-gray-900">数据导入完成：成功导入50条记录</p>
                                <p class="text-xs text-gray-500">15分钟前</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="w-2 h-2 bg-yellow-600 rounded-full"></div>
                            <div class="flex-1">
                                <p class="text-sm text-gray-900">学分预警：新增3名学生进入预警名单</p>
                                <p class="text-xs text-gray-500">1小时前</p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4">
                            <div class="w-2 h-2 bg-red-600 rounded-full"></div>
                            <div class="flex-1">
                                <p class="text-sm text-gray-900">系统备份：自动备份完成</p>
                                <p class="text-xs text-gray-500">2小时前</p>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
    </main>
    </div>
    </div>
    <script>
        const creditDistribution = echarts.init(document.getElementById('creditDistribution'));
        const departmentCompletion = echarts.init(document.getElementById('departmentCompletion'));
        creditDistribution.setOption({
            animation: false,
            title: {
                text: '学分分布统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['0-2分', '2-4分', '4-6分', '6-8分', '8-10分', '10分以上']
            },
            yAxis: {
                type: 'value',
                name: '学生人数'
            },
            series: [{
                data: [30, 45, 78, 120, 95, 32],
                type: 'bar',
                itemStyle: {
                    color: '#1e40af'
                }
            }]
        });
        departmentCompletion.setOption({
            animation: false,
            title: {
                text: '院系学分达标率',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [{
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 85, name: '计算机学院' },
                    { value: 78, name: '电子信息学院' },
                    { value: 92, name: '自动化学院' },
                    { value: 68, name: '机械工程学院' },
                    { value: 88, name: '经济管理学院' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        });
        window.addEventListener('resize', function () {
            creditDistribution.resize();
            departmentCompletion.resize();
        });
    </script>
    <script src="js/charts.js"></script>
    <script src="js/studentManager.js"></script>
    <script src="js/main.js"></script>
    <script>
        // 页面加载完成后自动跳转到学生管理页面
        document.addEventListener('DOMContentLoaded', function () {
            // 延迟2秒后跳转，让用户看到欢迎页面
            setTimeout(function () {
                window.location.href = 'student-management.html';
            }, 2000);
        });
    </script>
</body>

</html>